<template>
  <div class="login">
    <img src="~assets/image/img_login.png" alt="" />
    <div class="login-main">
      <p class="login-text">手机号</p>
      <div class="login-user">
        <img src="~assets/logo.png" width="24" height="24" alt="" />
        <van-cell-group>
          <van-field
            type="digit"
            v-model="userName"
            placeholder="请输入用户名"
          />
        </van-cell-group>
      </div>
      <div class="xian"></div>
      <p class="login-text">验证码</p>
      <div class="login-user">
        <img src="~assets/logo.png" width="24" height="24" alt="" />
        <van-cell-group class="login-pwd">
          <van-field
            type="digit"
            v-model="userSMS"
            placeholder="请输入验证码"
          />
        </van-cell-group>
        <span class="login-text" @click="getSms">{{ smsText }}</span>
      </div>
      <div class="xian"></div>
      <van-button round>登录</van-button>
      <p class="login-bottom">
        登录即代表已同意
        <span>《卡德世界服务协议》</span>
      </p>
    </div>
  </div>
</template>
<script>
import { getApiSms } from "network/ApiServe";

export default {
  data() {
    return {
      userName: "15827377416",
      userSMS: "",
      timeSS: 60,
      smsText: "获取验证码",
    };
  },
  mounteds: {},
  methods: {
    // 获取sms
    getSms() {
      if (this.userName.toString().length == 0) {
        // Toast("请先输入手机号码");
        console.log("请先输入手机号码");
        return;
      }
      console.log("phone:" + this.userName);
      let clearTime = setInterval(() => {
        this.timeSS--;
        if (this.timeSS === 0) {
          clearInterval(clearTime);
          this.timeSS = 60;
          this.smsText = "获取验证码";
        } else {
          this.smsText = "剩余" + this.timeSS + "s";
        }
      }, 1000);
      // 获取短信 api
      getApiSms(this.userName)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style  scoped>
@import "../assets/css/base.css";
.login {
  background-color: #fff;
  font-size: 14px;
}
.login-main {
  width: 100%;
  height: 100%;
  padding: 10px 45px 20px;
}
.login-text {
  color: #f08300;
}
.login-user {
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.xian {
  margin: 10.5px 0 29.5px;
  background-color: #f08300;
  width: 100%;
  height: 1px;
}
.login-pwd {
  width: 170px;
}
.van-button {
  background-color: #f08300;
  color: #fff;
  width: 100%;
  margin-top: 20px;
}
.login-bottom {
  margin-top: 85px;
  color: #666;
  text-align: center;
}
.login-bottom span {
  color: #2574ea;
  font-size: 13px;
}
</style>